<template>
<view>
<view v-if="!perView">
	<uni-card :is-shadow="false">
		<uni-section title="事件详情" type="line">
			<uni-section title="事件">
				<template v-slot:right>
					{{ info.warnType?info.warnType:'暂无数据' }}
				</template>
			</uni-section>
			<uni-section title="事件时间">
				<template v-slot:right>
					{{ info.warnTime?getdatatime(info.warnTime):'-' }}
				</template>
			</uni-section>
			<uni-section title="设备">
				<template v-slot:right>
					<view v-for="(item, index) in info.device">
						<uni-card :title="item.deviceName" :is-shadow="false">
							<view class="content">
								<!-- :extra="1" -->
								<view class="card_bottom_view"><span class="card_bottom_span">设备采集值:</span><span>{{ item.concentration }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">检测对象:</span><span>{{ item.detection }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">数据单位:</span><span>{{ item.unit }}</span></view>
								<view class="card_bottom_view"><span class="card_bottom_span">通道信息:</span><span>{{ item.route }}</span></view>
							</view>
						</uni-card>
					</view>
				</template>
			</uni-section>
		</uni-section>
	</uni-card>
	
	<uni-card v-show="show" :is-shadow="false">
		<uni-section title="操作" type="line">
			<uni-forms-item label="上传证明" required label-width="74px">
				<button size="mini" type="primary" style="width: 500rpx;margin-top: 6px;background-color: #0081ff; color: #FFF;" @click="chooseImages()">点击上传</button>
				<scroll-view v-if="fileList.length != 0" style="height: 170rpx;width: 500rpx; white-space: nowrap;margin-top: 10px;" scroll-x="true" >
					<image v-for="(item, index) in fileList" :key="index" :src="item" @click="swClick(fileList, index)" @longtap="longtapClick(index)"  class="rounded-1  mr-1" style="width: 170rpx; height: 170rpx;margin-right: 10px;"></image>
				</scroll-view>
				<span v-if="fileList.length != 0" style="font-size: 12px;">长按可删除</span>
			</uni-forms-item>
			<uni-forms-item label="描述" required label-width="74px">
				<uni-easyinput type="textarea" v-model="detail" placeholder="请输入自我介绍" />
			</uni-forms-item>
			<button class="reject_button" @click="submit">提交</button>
		</uni-section>
	</uni-card>
</view>
<view v-if="perView">
	<view class="mask">
		<view @click="guanClick()" style="font-size: 30px;bottom: 60px;position: absolute;">
			<uni-icons type="closeempty" size="30" color="#FFF"></uni-icons>
		</view>
		<swiper @change="changeSwiper" class="my_swiper" :current="current" :circular="circular" :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration">
			<swiper-item v-for="(x, y) in imageList" :key="y">
				<view v-if="fileSuffixType(x) == 'image'" class="bg_img" :style="{ backgroundImage: 'url('+x+')'}"></view>
				<video v-if="fileSuffixType(x) == 'video' && current == y" :src="x" style="width: 100%;height: 100%;margin-right: 10px;"></video>
			</swiper-item>
		</swiper>
	</view>
	<view class="page" v-if="imageList.length>0">{{ current + 1 }} / {{ imageList.length }}</view>
</view>
</view>
</template>

<script>
import { getEventDictList, putRectifyEvent, getEventDetailById, getDetectionObjectDictList, getDataUnitDictList } from "@/api/system/uniapp.js"
import { uploadFile } from "@/api/bicu.js"
import { matchFileSuffixType } from "@/utils/fileSuffixTypeUtil.js"
export default {
	data() {
		return {
			deptId: uni.getStorageSync('storage_data').vuex_deptid,
			info: {
				device: [],
			},
			monitorList: [],
			dataUnitList: [],
			fileList: [],
			detail: null,
			createBy: uni.getStorageSync('storage_data').vuex_userId,
			show: true,
			perView: false,
			current: 0,
			imageList: [],
			duration: 500,
			autoplay: false,
			circular: true,
			indicatorDots: false,
		}
	},
	onLoad: function(option) {
		this.info = JSON.parse(option.row)
		this.geteventCode(this.info.eventCode).then(res => {this.info.eventCode = res})
		this.getEventDetailById()
	},
	methods: {
		submit(){
			if(!this.detail){
				uni.showToast({title: '请填写描述！',icon: 'error',duration:2000});
				return false
			}
			if(this.fileList.length == 0){
				uni.showToast({title: '请上传证明！',icon: 'error',duration:2000});
				return false
			}
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			putRectifyEvent({id: this.info.id, detail: this.detail, image: this.fileList.join()}).then(res => {
				if(res.code == 200){
					uni.$emit('allocation',{msg:'页面更新', index: this.info.index})
					uni.showToast({title: "上报成功!",icon: "success",position: 'bottom'})
					this.show = false;
					uni.hideLoading()
				}else{
					uni.showToast({title: '上报失败！',icon: 'error',duration:2000});
					uni.hideLoading()
				}
			})
		},
		getEventDetailById(){
			getEventDetailById({id: this.info.id}).then(res => {
				console.log("ddd", res.data, this.info)
				// res.data.map(i => {
				// 	this.getmonitorObject(i.monitorObject).then(res => {i.monitorObject = res})
				// 	this.getdataUnit(i.getdataUnit).then(res => {i.getdataUnit = res})
				// })
				this.$set(this.info, "device", res.data)
				console.log(this.info)
			})
		},
		async geteventCode(item){
			let data;
			await getEventDictList().then(res => {
				data = res.data
			})
			for(let i = 0;i < data.length;i++){
				if(data[i].code == item){
					return data[i].name
				}
			}
		},
		async getmonitorObject(item){
			if(this.monitorList.length == 0){
				await getDetectionObjectDictList().then(res => {
					this.monitorList = res.data
				})
			}
			for(let i = 0;i < this.monitorList.length;i++){
				if(this.monitorList[i].code == item){
					return this.monitorList[i].name
				}
			}
		},
		async getdataUnit(item){
			await getDataUnitDictList().then(res => {
				this.dataUnitList = res.data
			})
			for(let i = 0;i < this.dataUnitList.length;i++){
				if(this.dataUnitList[i].code == item){
					return this.dataUnitList[i].name
				}
			}
		},
		
		swClick(list,index) {
			if(list != undefined){
				this.current = index
				this.imageList = list
				this.perView = true
			}
		},
		guanClick(guan){
			this.perView = false
		},
		changeSwiper(e) {
			this.current = e.target.current;
		},
		longtapClick(index){
			var that = this;
			uni.showModal({
				title: '删除文件',
				content: '是否删除该文件？',
				success: (res) => {
					if(res.confirm){
						that.fileList.splice(index,1);
					}
				}
			})
		},
		chooseImages(){
			var that = this
			uni.chooseImage({
				//允许上传的照片数量
				count: 9,
				 // sizeType:  original 原图，compressed 压缩图，默认二者都有
				sizeType: ['original'],
				// sourceType: ['camera','album'], 从相册选择
				sourceType: ['album', 'camera'],
				success: (res) => {
					//因为有一张图片， 输出下标[0]， 直接输出地址
					let data = []
					res.tempFilePaths.forEach(item => {
						data.push({name: 'file', filePath: item})
					})
					for (var i = 0;i < data.length;i ++) {
						uploadFile(data[i]).then(res => {
							that.fileList.push(res.url)
						})
					}
				},
				fail: (err) => {
					// #ifdef MP
					//getSetting 获取用户的当前设置， 判断是否已授权,
					uni.getSetting({
						success: (res) => {
						//用户授权结果，其中 key 为 scope 值，value 为 Boolean 值，表示用户是否允许授权
							let authStatus = res.authSetting['scope.album'];
							if (!authStatus) {
								uni.showModal({
									title: '授权失败',
									content: '系统需要从您的相册和相机的权限，请在设置界面打开相关权限',
									success: (res) => {
									//确认按钮框
										if (res.confirm) {
										//调起客户端小程序设置界面，返回用户设置的操作结果。
											uni.openSetting()
										}
									}
								})
							}
						}
					})
					// #endif
				}
			})
		},
		getdatatime(time, type) {
		  if (!time) {
			return "暂无数据";
		  }
		  const dt = new Date(time);
		  const y = dt.getFullYear();
		  const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		  const d = (dt.getDate() + "").padStart(2, "0");
		  const hh = (dt.getHours() + "").padStart(2, "0");
		  const mm = (dt.getMinutes() + "").padStart(2, "0");
		  const ss = (dt.getSeconds() + "").padStart(2, "0");
		  return `${y}年${m}月${d}日 ${hh}:${mm}:${ss}`;
		},
	}
}
</script>

<style lang="scss">
.reject_button{
	background-color: #ecf5ff;
	color: #409eff;
	border: 1px solid #b3d8ff;
	width: 100%;
	font-size: 14px;
	margin: 0 auto;
}
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	z-index: 5;
	> .my_swiper {
		width: 100%;
		height: 60vh;
		.bg_img {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position:center;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
